import React, {useEffect, useRef, useState} from 'react';

function Index() {

    const params = new URLSearchParams(window.location.search);

    const initBoardUrls: string[] = [];
    const count = useRef<number>(0);
    let switchTime: number;
    if (params.get('switchTime')) {
        switchTime = parseInt(params.get('switchTime') as string) * 1000;
    }
    const productionLineCodes = params.get('production_line_code');
    const [boardUrl, setBoardUrl] = useState(initBoardUrls[count.current]);
    if (productionLineCodes?.length && productionLineCodes?.length > 0) {
        let strList = productionLineCodes.split(',');
        strList.forEach(item => {
            let itemStr = 'http://192.168.1.117:3333/public/dashboard/653c16da-40c7-41b4-b02d-51b8b986b0d8' + "?production_line_code=" + item + '#refresh=60'
            initBoardUrls.push(itemStr);
        })
    }
    useEffect(() => {
        if (switchTime > 0) {
            setBoardUrl(initBoardUrls[0])
            const timer = setInterval(() => {
                if (count.current === initBoardUrls.length - 1) {
                    count.current = -1;
                }
                setBoardUrl(initBoardUrls[++count.current])
            }, switchTime);
            return () => clearInterval(timer)//清除定时器不要忘记
        }
    }, []);  //数组依赖不要忘记

    return (
        <div style={{height: '95%', overflow: "hidden"}}>
            <iframe
                src={boardUrl}
                frameBorder="0"
                width="100%"
                height="100%"
            ></iframe>
        </div>

    );
}

export default Index;
